<template>
  <div class="cart">

    <div class="cart_empty" v-if="allCarts==null||allCarts.length==0">
      <img src="../assets/shopping-cart.png" />
    </div>
    <div v-if="allCarts!=null&&allCarts.length!=0">
      <el-row>
        <el-col :span="24">
          <span style="font-size: 18px;">亲! 您的购车有以下商品</span>
        </el-col>
      </el-row>
      <div class="cart_item" v-for="store in allCarts">
        <el-row style="margin-bottom: 10px;">
          <el-col :span="20">
            <i class="iconfont icon-mendian" style="font-size: 20px;"></i><span
              style="font-size:16px; font-weight: bold; margin-left: 5px;">{{store.storeName}}</span>
          </el-col>
        </el-row>
        <el-row class="item_row">
          <el-col :span="11">
            <span>商品</span>
          </el-col>
          <el-col :span="9">
            <span>份数</span>
          </el-col>
          <el-col :span="4">
            <span>小计(元)</span>
          </el-col>
        </el-row>
        <el-row class="item_row" v-for="item in store.list">
          <div class="food_item">
            <el-col :span="11">
              <span>{{item.foodName}}</span>
            </el-col>
            <el-col :span="9">
              <el-input-number style="width: 90px;" size="mini" @change="changeCount(item.foodId,item.count)"
                v-model="item.count" :min="0" :max="10"></el-input-number>
            </el-col>
            <el-col :span="4">
              <span style="color: rgb(255, 170, 0);">&yen;{{item.price}}</span>
            </el-col>
          </div>
        </el-row>
        <el-row class="item_row">
          <el-col :span='3'>
            请选择就餐方式：
          </el-col>
          <el-col :span='6'>
            <el-radio v-model="dispatching" label="1" border>到店自取</el-radio>
            <el-radio v-model="dispatching" label="2" border>商家配送</el-radio>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span='5' :offset="19" style="background-color: rgb(255, 170, 0); height: 50px;">
            <span style="line-height: 50px; cursor: pointer; margin-left: 75px; font-weight: bold;"
              @click="submitCart(store)">立即下单</span>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Cart',
    data() {
      return {
        allCarts: [],
        dispatching: '1',
        foodIds: [],
        form: {},
      }
    },
    methods: {
      showCart() {
        this.$http.get("/userCart/showCart").then(resp => {
          if (resp.data.code == 200) {
            console.log(resp)
            this.allCarts = resp.data.data;
            console.log(this.allCarts);
          }
        })
      },
      changeCount(foodId, count) {
        console.log(foodId, count);
        this.$http.post("/userCart/updateCart", {
          foodId: foodId,
          count: count,
        }).then(resp => {
          if (resp.data.code == 200) {
            this.showCart();
          }else{
            this.$message.error(resp.data.message);
          }
        })
      },
      submitCart(obj) {
        for (const i of obj.list) {
          this.foodIds.push(i.foodId);
        }
        this.form.storeId = obj.storeId;
        this.form.storeName = obj.storeName;
        this.form.dispatching = this.dispatching;
        this.form.foodIds = this.foodIds;
        console.log(this.form);
        this.$http.post("/userCart/submitCart", this.form).then(resp => {
          if (resp.data.code != 200) {
            this.$message({
              message: resp.data.message,
              type: 'warning'
            });
          }
          this.foodIds = [];
          if (resp.data.code == 200) {
            localStorage.setItem("cartInfo",JSON.stringify(resp.data.data));
             this.$router.push("/submitCart");
          }
        })

      },

    },
    created() {
      this.showCart();
    }
  }
  import '../assets/icon/iconfont.css';
</script>

<style scoped>
  .cart {
    background-color: rgb(239, 238, 230);
    /* position: absolute; */
    padding: 60px;
    bottom: 0;
    top: 0;
  }

  .cart_item {
    margin: 25px;
  }

  .item_row {
    border-bottom: 1px solid gainsboro;
    height: 55px;
    background-color: rgb(245, 247, 250);
    padding-left: 8px;
    font-size: 14px;
    line-height: 55px;
  }
</style>
